<template>
	<view class="login">
		<!-- F1 用户名输入框组 -->
		<view class="input-group">
			<uni-easyinput  v-model="uname" placeholder="用户名/邮箱/手机号" :inputBorder="false"/>
		</view>
		<!-- F2 密码输入框组 -->
		<view class="input-group">
			<uni-easyinput type="password" v-model="upwd" 
			placeholder="请输入密码" :inputBorder="false"/>
			<text>|</text>
			<navigator url="/pages/index/index">忘记密码</navigator>
		</view>
		<!-- F3 登录按钮 -->
		<view :class="{button:true,disabled:!agree}" @click="doLogin">
			<text>登录</text>
		</view>
		<!-- F4 打开注册组件 -->
		<text class="go" @click="goRegister">还没账号?现在去注册</text>
		<!-- F5 其他登录方式 -->
		<!-- F6 使用条款 -->
		<view class="agreement">
			<checkbox-group @change='doChecBoxChange'>
				<label for="">
					<label>
						<checkbox value="cbCheck" />
							<text>登录代表同意用户隐私政策条款</text>
					</label>
				</label>
			</checkbox-group> 
		</view>
	</view>
</template>

<script>
	export default {
		name:"xz-login",
		data() {
			return {
				uname:'yaya',
				upwd:'123456',
				agree:false
			};
		},
		methods: {
			doLogin(){
				if(!this.agree){
					uni.showToast({
						title:'同意使用条款才能登录',
						icon:'error'
					})
					return
				}
				uni.showLoading({
					title:'登录中'
				})
				let uname=this.uname.trim()
				let upwd=this.upwd.trim()
				let url=this.$url.login
				console.log(url)
				if(uname=='' && upwd=='') return
				uni.request({
					url,
					method:"POST",
					header:{'content-Type':'application/x-www-form-urlencoded'},
					data:{uname,upwd},
					success: (res) => {
						console.log(res.data)
						if(res.data.code===200){
							uni.showToast({
								title:'登陆成功',
								icon:"success"
							})
							this.$emit('userloginsuccess')
						}else{
							uni.showToast({
								title:'登陆失败',
								icon:"error"
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			doChecBoxChange(e){
				// console.log(e.detail)
				this.agree=e.detail.value.length===1
			},
			goRegister() {
				this.$emit('gotoregister')
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title:'用户登录'
			})
		}
	}
</script>

<style lang="scss">
 .login{
	 position: absolute;
	 top: 0;
	 width: 750rpx;
	 padding: 60rpx;
	 .input-group{
		 border-bottom: 1px solid $uni-text-color-grey;
		 // padding: 15rpx;
		 margin-bottom:$uni-spacing-col-lg ;
		 display: flex;
		 align-items: center;
		 text{
			 color: $uni-text-color-grey;
			 margin: 0 $uni-spacing-row-base;
			 font-size: $uni-font-size-sm;
		 }
		 navigator{
			 color: $uni-text-color-grey;
			 font-size: $uni-font-size-sm;
		 }
	 }
	 .button{
		 background-color: $xz-theme;
		 border-radius: $uni-border-radius-lg;
		 text-align: center;
		 color: #fff;
		 line-height: 80rpx;
		 margin-top: 100rpx;
		 margin-bottom: 40rpx;
		 &:active{
			background-color:darken($color: $xz-theme, $amount:5%);
		 }
		 &.disabled{
			 background-color:$uni-text-color-disable ;
		 }
	 }
	 .go{
		color: $uni-text-color-grey;
	 }
	 .agreement{
		 // background-color: red;
		 margin-top: 50rpx;
		 text-align: center;
	 }
 }
</style>